<template>
  <div>
    <dv-scroll-board :config="config" class="table" style="height:26vh" />
  </div>
</template>

<script>
// import moment from 'moment'
import { bnrQuery } from '../../api/dataApi'
export default {
  name: '',
  data() {
    return {
      config: null,
      dataList: [],
      dataList1: [],
    }
  },
  props: {
    eqname: {
      type: String,
      default: '',
    },
    cx: {
      type: String,
      default: '',
    },
    // dataList: {
    //   type: Array,
    //   default: () => [],
    // },
    // eqNum: {
    //   type: Object,
    //   default: () => {
    //     return {}
    //   },
    // },
  },

  watch: {
    dataList1(newData) {
      this.config = {
        header: [
          '产线',
          '报警类别',
          '呼叫时间',
          '响应时间(分)',
          '响应人',
          '持续时长(分)',
        ],
        headerHeight: document.body.clientHeight > 1080 ? 26 : 40,
        data: newData,
        index: false,
        columnWidth: [140, 150, 220, 220, 100, 120],
        align: ['left'],
        headerBGC: '#06144f',
        // oddRowBGC: '#06144f',
        oddRowBGC: 'rgba(52,99,171,0.15)',
        // evenRowBGC: '#15235c',
        evenRowBGC: '',
        waitTime: '3000',
        rowNum: 7,
      }
    },

    // dataList(newData) {
    //   this.config = {
    //     header: [
    //       '设备编号',
    //       '所属产品线',
    //       '开始时间',
    //       '异常代码',
    //       // '产量损失',
    //       '影响工时',
    //     ],
    //     headerHeight: 22,
    //     data: newData,
    //     index: false,
    //     columnWidth: [160, 200, 240, 150, 150],
    //     align: ['left'],
    //     headerBGC: ' ',
    //     // headerBGC: '#06144f',
    //     // oddRowBGC: '#06144f',
    //     oddRowBGC: ' ',
    //     // evenRowBGC: '#15235c',
    //     evenRowBGC: 'rgba(52,99,171,0.15)',
    //     waitTime: '5000',
    //     rowNum: 7,
    //   }
    // },
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const that = this
      const header = {}
      header['report.tableid'] = 'bne_device_management_ad_left'
      header['wc_code'] = this.cx
      const params = {
        _params: JSON.stringify(header),
        _conditions: JSON.stringify({
          wc_code: 'like_anywhere',
        }),
        pageIndex: -1,
      }
      bnrQuery(params)
        .then((res) => {
          if (res.code == 0 && res.data && res.data.length > 0) {
            that.qThree(res.data)
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    qThree(reportData) {
      const _reportData = []
      reportData.forEach((reportItem) => {
        const _m = []
        if (reportItem.responsetime && !reportItem.confirmtime) {
          _m.push(`<span style="color:#eee15f">${reportItem.wc_name} </span>`)
          _m.push(
            `<span style="color:#eee15f">${reportItem.reasonname} </span>`
          )
          _m.push(
            `<span style="color:#eee15f">${reportItem.repairtime} </span>`
          )
          _m.push(
            `<span style="color:#eee15f">${reportItem.responsetime} </span>`
          )
          _m.push(`<span style="color:#eee15f">${reportItem.psname} </span>`)
          _m.push(
            `<span style="color:#eee15f">${reportItem.continuemin} </span>`
          )
        } else if (!reportItem.responsetime) {
          _m.push(`<span style="color:#fa563b">${reportItem.wc_name} </span>`)
          _m.push(
            `<span style="color:#fa563b">${reportItem.reasonname} </span>`
          )
          _m.push(
            `<span style="color:#fa563b">${reportItem.repairtime} </span>`
          )
          _m.push(
            `<span style="color:#fa563b">${reportItem.responsetime} </span>`
          )
          _m.push(`<span style="color:#fa563b">${reportItem.psname} </span>`)
          _m.push(
            `<span style="color:#fa563b">${reportItem.continuemin} </span>`
          )
        } else if (reportItem.responsetime && reportItem.confirmtime) {
          _m.push(`<span style="color:#0ce889">${reportItem.wc_name} </span>`)
          _m.push(
            `<span style="color:#0ce889">${reportItem.reasonname} </span>`
          )
          _m.push(
            `<span style="color:#0ce889">${reportItem.repairtime} </span>`
          )
          _m.push(
            `<span style="color:#0ce889">${reportItem.responsetime} </span>`
          )
          _m.push(`<span style="color:#0ce889">${reportItem.psname} </span>`)
          _m.push(
            `<span style="color:#0ce889">${reportItem.continuemin} </span>`
          )
        } else {
          _m.push(reportItem.wc_name)
          _m.push(reportItem.reasonname)
          _m.push(reportItem.repairtime)
          _m.push(reportItem.responsetime)
          _m.push(reportItem.psname)
          _m.push(reportItem.continuemin)
        }

        _reportData.push(_m)
        console.log('_reportData', _reportData)
      })
      this.dataList1 = _reportData
    },

    // getData() {
    //   const that = this
    //   const header = {}
    //   header['report.tableid'] = 'main@prod_sbjk'
    //   header['cx'] = this.cx
    //   const params = {
    //     '@params': JSON.stringify(header),
    //     _conditions: JSON.stringify({
    //       cx: 'like_anywhere',
    //     }),
    //     // pageSize: 10000,
    //     pageIndex: -1,
    //     sortField: 'id',
    //     sortOrder: 'desc',
    //   }
    //   bnrQuery(params)
    //     .then((res) => {
    //       this.qThree(res.data)
    //     })
    //     .catch(() => {
    //       that.$message.error('数据请求失败，请联系管理员！')
    //     })
    // },
    // qThree(reportData) {
    //   const _reportData = []
    //   reportData.forEach((reportItem) => {
    //     const _m = []
    //     _m.push(reportItem.sbbh)
    //     _m.push(reportItem.sscpx)
    //     _m.push(reportItem.kssj)
    //     // _m.push(reportItem.invname)
    //     _m.push(reportItem.ycdm)
    //     // _m.push(reportItem.clss)
    //     _m.push(reportItem.txgs)

    //     _reportData.push(_m)
    //   })
    //   this.dataList = _reportData
    // },
  },
}
</script>

<style lang="less" scoped>
.tit {
  .px2font(17);
  .px2vh(padding-top, 15);
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
}
.table-list {
  position: relative;
}
.circle {
  width: 1rem;
  height: 1rem;
  border-radius: 20px;
  display: inline-block;
  margin-right: 5px;
}

.table {
  padding: 10px 25px 15px 25px;
  color: #eee;
}
</style>
